<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style/bootstrap.css">
    <script src="style/bootstrap.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .task-list{
            height: 600px;
            overflow-y: scroll;
        }
        .fail-status{
            background-color: yellow;
        }
        .tasklist {
            min-width: 800px;
            border: 1px solid black;
            border-radius: 10px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
    <div class="card col-10 m-lg-auto">
        <div class="card-header">所有设备
            <div>
                <div class="card-body">
                    <table class="table table-hover table-bordered">
                        <thead>
                        <tr class="text-center align-middle">
                            <th scope="col">#</th>
                            <th scope="col">设备端口号</th>
                            <th scope="col">抖音名称</th>
                            <th scope="col">设备状态</th>
                            <th scope="col" colspan="1" class="text-center">操作1</th>
                            <th scope="col" colspan="1" class="text-center">操作2</th>
                            <th scope="col" colspan="1" class="text-center">操作3</th>
                            <th scope="col" colspan="1" class="text-center">操作4</th>
                            <th scope="col" colspan="1" class="text-center">操作5</th>
                            <th scope="col" colspan="1" class="text-center">操作6</th>
                            <th scope="col" colspan="1" class="text-center">操作7</th>
                            <th scope="col" colspan="1" class="text-center">操作8</th>
                        </tr>
                        </thead>
                        <tbody>
<!--                        <tr v-for="(item, index) in this.device_list" :key="index" :class="{deviceStatusMap[item] === '正常':'text-center align-middle fail-status'}">-->
                        <tr v-for="(item, index) in device_list" :key="index"
                            :class="{ 'text-center align-middle': deviceStatusMap[item] === '正常','text-center align-middle fail-status': deviceStatusMap[item] !== '正常'}">
                            <th scope="row">{{index + 1 }}</th>
                            <td>{{item}}</td>
                            <td v-if="douyinMap[item]">{{douyinMap[item]}}</td>
                            <td v-else>
                                <button type="button" class="btn btn-outline-primary"
                                        @click="getDouyinName(item, null)">获取抖音名字
                                </button>
                            </td>
                            <td>{{deviceStatusMap[item]}}</td>
                            <td>
                                <button type="button" class="btn btn-outline-primary"
                                        @click="handleApp(item, 'start', [])">启动应用
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-primary"
                                        @click="handleApp(item, 'stop', [])">关闭应用
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-primary" data-toggle="modal"
                                        data-target="#roomModal" @click="openModal(item, null, 'roomModal')">查找并进入直播间
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-primary" @click="clickCare(item)">给直播间点关注
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-primary" data-toggle="modal"
                                        data-target="#sendTextModal" @click="openModal(item, null, 'sendTextModal')">
                                    给直播间评论
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-primary" data-toggle="modal"
                                        data-target="#clickLikeModal" @click="openModal(item, null, 'clickLikeModal')">
                                    给直播间点赞
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-primary" data-toggle="modal"
                                        data-target="#findGiftModal" @click="openModal(item, null, 'findGiftModal')">
                                    给直播间送礼物
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-primary" data-toggle="modal"
                                        data-target="#loopHandleModal"
                                        @click="openModal(item, null, 'loopHandleModal')">循环操作
                                </button>
                            </td>

                        </tr>
                        <tr class="text-center align-middle">
                            <th scope="row">*****</th>
                            <td>批量操作</td>
                            <td>
                                <button type="button" class="btn btn-outline-primary"
                                        @click="getDouyinName(null, this.device_list)">获取抖音名称
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-primary"
                                        @click="get_all_device(null, this.device_list)">更新所有设备状态
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-primary"
                                        @click="handleApp(null, 'start', this.device_list)">启动应用
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-primary"
                                        @click="handleApp(null, 'stop', this.device_list)">关闭应用
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-primary" data-toggle="modal"
                                        data-target="#roomModal"
                                        @click="openModal(null, this.device_list, 'roomModal')">查找并进入直播间
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-primary"
                                        @click="clickCare(null, this.device_list)">给直播间点关注
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-primary" data-toggle="modal"
                                        data-target="#sendTextModal"
                                        @click="openModal(null, this.device_list, 'sendTextModal')">给直播间评论
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-primary" data-toggle="modal"
                                        data-target="#clickLikeModal"
                                        @click="openModal(null, this.device_list, 'clickLikeModal')">给直播间点赞
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-primary" data-toggle="modal"
                                        data-target="#findGiftModal"
                                        @click="openModal(null, this.device_list, 'findGiftModal')">给直播间送礼物
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-primary" data-toggle="modal"
                                        data-target="#loopHandleModal"
                                        @click="openModal(null, this.device_list, 'loopHandleModal')">循环操作
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!--添加任务-->
    <div class="card col-10" style="margin-top: 50px;margin-right: auto; margin-left: auto">
        <div class="card-header"> 任务队列</div>
        <div class="card-body">
            <div class="row">
                <!--评论任务-->
                <div class="col-lg-4">
                    <div class="card">
                        <div class="row card-header">
                            <div class="col text-lg-start">评论任务</div>
                            <div class="col text-lg-end">
                                <button class="btn btn-outline-primary" data-toggle="modal"
                                        data-target="#taskSendTextModal" @click="openAddTaskModal('5', 'taskSendTextModal')">添加任务</button>
                            </div>
                        </div>
                        <div class="card-body">
                            <table class="table table-hover table-bordered">
                                <thead>
                                <tr class="text-center align-middle">
                                    <td>序号</td>
                                    <td>评论文本</td>
                                    <td>评论次数</td>
                                    <td>评论频率</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item, index in this.sendTextTaskList" :key="index">
                                        <td>{{index}}</td>
                                        <td>{{item.text}}</td>
                                        <td>{{item.count}}</td>
                                        <td>{{item.interval}}</td>
                                        <td>
                                            <button class="btn btn-outline-primary" @click="removeTask('5', index)">删除</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!--点赞任务-->
                <div class="col-lg-4">
                    <div class="card">
                        <div class="row card-header">
                            <div class="col text-lg-start">点赞任务</div>
                            <div class="col text-lg-end">
                                <button class="btn btn-outline-primary" data-toggle="modal"
                                        data-target="#taskClickLikeModal" @click="openAddTaskModal('6', 'taskClickLikeModal')">添加任务</button>
                            </div>
                        </div>
                        <div class="card-body">
                            <table class="table table-hover table-bordered">
                                <thead>
                                <tr class="text-center align-middle">
                                    <td>序号</td>
                                    <td>点赞次数</td>
                                    <td>固定频率</td>
                                    <td>随机频率范围</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody>
                                     <tr v-for="item, index in this.clickLikeTaskList" :key="index">
                                        <td>{{index}}</td>
                                        <td>{{item.count}}</td>
                                        <td>{{item.interval}}</td>
                                        <td>{{item.randomInterval}}</td>
                                        <td>
                                            <button class="btn btn-outline-primary" @click="removeTask('6', index)">删除</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!--送礼物任务-->
                <div class="col-lg-4">
                    <div class="card">
                        <div class="row card-header">
                            <div class="col text-lg-start">送礼物任务</div>
                            <div class="col text-lg-end">
                                <button class="btn btn-outline-primary" data-toggle="modal"
                                        data-target="#taskFindGiftModal" @click="openAddTaskModal('7', 'taskFindGiftModal')">添加任务</button>
                            </div>
                        </div>

                        <div class="card-body">
                            <table class="table table-hover table-bordered">
                                <thead>
                                <tr class="text-center align-middle">
                                    <td>序号</td>
                                    <td>礼物名称</td>
                                    <td>礼物个数</td>
                                    <td>礼物间隔时间</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody>
                                     <tr v-for="item, index in this.findGiftTaskList" :key="index">
                                        <td>{{index}}</td>
                                        <td>{{item.name}}</td>
                                        <td>{{item.count}}</td>
                                        <td>{{item.interval}}</td>
                                        <td>
                                            <button class="btn btn-outline-primary" @click="removeTask('7', index)">删除</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--配置任务顺序-->
    <div class="card col-10" style="margin-top: 50px;margin-right: auto; margin-left: auto">
        <div class="card-header">配置任务顺序</div>
        <div class="card-body">
            <div class="row">
                <div class="col">
                    <select class="form-select" aria-label="Default select example" v-model="curConfigDevice" >
                        <option value="">请选择设备</option>
                        <option value="all">所有设备</option>
                        <option v-for="(item, index) in device_list" :value="item">{{item}}</option>
                    </select>
                </div>
                <div class="col">
                    <select class="form-select" aria-label="Default select example" v-model="taskType"
                            @click="selectTask">
                        <option value="">请选择任务类型</option>
                        <option value="5">评论任务</option>
                        <option value="6">点赞任务</option>
                        <option value="7">送礼物任务</option>
                    </select>
                </div>
                <div class="col">
                    <select class="form-select" aria-label="Default select example" v-model="taskNumber">
                        <option value="">请选择任务序号</option>
                        <option v-for="item, index in this.curTaskList" :value="index">{{index}}</option>
                    </select>
                </div>
                <div class="col">
                    <button class="btn btn-outline-primary" @click="getTaskObj">添加到任务队列</button>
                </div>
            </div>
        </div>
        <h3 style="margin-left: 20px">任务队列</h3>
        <div class="card">
            <div class="card-body task-list">
<!--                <div  v-for="item, index in this.allTaskQueue"  :key="index" class="alert alert-warning alert-dismissible fade show" role="alert">-->
<!--                    <strong>{{item.taskType + '.' + item.taskNumber}}</strong> {{item.params}}-->
<!--                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" @click="removeQueueTask(index)"></button>-->
<!--                </div>-->

                <div class="d-flex align-items-start">
                    <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist"
                         aria-orientation="vertical">
                        <button  :class="{'nav-link active': 'all' === curSelectDevice, 'nav-link': 'all' !== curSelectDevice}"  data-bs-toggle="pill" style="min-width: 250px; border: 3px solid wheat"
                                data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" @click="curSelectDevice='all'"
                                aria-selected="true">所有设备的共同任务
                        </button>
                        <button v-for="(val, index) in allTaskQueue" v-show="'all' !== index" :key="index" :class="{'nav-link active': index === curSelectDevice, 'nav-link': index !== curSelectDevice}" id="v-pills-home-tab" data-bs-toggle="pill" style="min-width: 250px; border: 3px solid wheat"
                                data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" @click="curSelectDevice=index"
                                aria-selected="true">{{index}}
                        </button>
                    </div>
                    <div class="tab-content border-dark tasklist" id="v-pills-tabContent">
                         <button class="btn btn-outline-primary" @click="stopRunTask(curSelectDevice, null)">停止当前设备设备</button>
                        <table class="table table-hover table-bordered" style="margin-top: 20px">
                                <thead>
                                <tr class="text-center align-middle">
                                    <td>序号</td>
                                    <td>任务内容</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item, index in allTaskQueue[curSelectDevice]" :key="index">
                                        <td>{{item.taskType + '.' + item.taskNumber}}</td>
                                        <td>{{item.params}}</td>
                                        <td>
                                            <button class="btn btn-outline-primary" @click="removeQueueTask(curSelectDevice, index)">删除</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                    </div>
                </div>

            </div>
        </div>

        <h3 style="margin-left: 20px; margin-top: 30px">配置任务的循环次数</h3>
        <div class="card">
            <div class="row" style="padding: 30px">
                <div class="col">
                    <select class="form-select" aria-label="Default select example" v-model="curSelectLoopCountDevice" >
                        <option value="">请选择设备</option>
                        <option value="all">所有设备</option>
                        <option v-for="(item, index) in device_list" :value="item">{{item}}</option>
                    </select>
                </div>
                <div class="input-group mb-3 col">
                    <span class="input-group-text" id="basic-addon1">任务循环的次数</span>
                    <input type="text" class="form-control" v-model="loopCount" placeholder="默认只循环1次" aria-describedby="basic-addon1">
                </div>

                <div class="col">
                    <button class="btn btn-outline-primary" @click="setLoopCount">{{setLoopCountBtnText}}</button>
                </div>
            </div>

        </div>

        <h3 style="margin-left: 20px; margin-top: 30px">开始执行任务</h3>
        <div class="card">
            <div class="row" style="padding: 30px">
                <div class="col">
                    <label class="form-check-label" style="font-size: 20px">所有设备的共同任务最后执行: <input type="checkbox" v-model="allTaskIsLast" style="width: 30px; height: 30px"></label>

                </div>
                <div class="col">
                    <button class="btn btn-outline-primary" @click="startRunTask">开始执行任务</button>
                </div>

                <div class="col">
                    <button class="btn btn-outline-primary" @click="stopRunTask(null, device_list)">停止所有任务</button>
                </div>
            </div>
        </div>
    </div>



    <div style="margin-bottom: 100px"></div>
    <!--任务队列所有模态框-->

    <!--给直播间评论-->
    <div class="modal fade" id="taskSendTextModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">添加评论任务</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            @click="closeModal('taskSendTextModal')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">评论文本：</span>
                    </div>
                    <input type="text" v-model="sendText" class="form-control" placeholder="请输入你想发送的评论信息"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">评论次数：</span>
                    </div>
                    <input type="text" v-model="sendTextCount" class="form-control" placeholder="请输入你想发送评论的次数（默认为1次）"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">评论频率：</span>
                    </div>
                    <input type="text" v-model="sendTextInterval" class="form-control"
                           placeholder="请输入你想发送评论的频率（单位：秒，默认为 0.5秒/次）" aria-label="Username"
                           aria-describedby="basic-addon1">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                            @click="closeModal('taskSendTextModal')">关闭
                    </button>
                    <button type="button" class="btn btn-primary" @click="createTask('5', 'taskSendTextModal')">确认操作</button>
                </div>
            </div>
        </div>
    </div>

    <!--给直播间点赞-->
    <div class="modal fade" id="taskClickLikeModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">添加点赞任务</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            @click="closeModal('taskClickLikeModal')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">点赞次数：</span>
                    </div>
                    <input type="text" v-model="clickLikeCount" class="form-control" placeholder="（默认为1次）"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">点赞的固定频率：</span>
                    </div>
                    <input type="text" v-model="clickLikeInterval" class="form-control" placeholder="（单位：秒，默认为 1秒/次）"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">点赞的随机频率范围：</span>
                    </div>
                    <input type="text" v-model="clickLikeRandomInterval_1" class="form-control" placeholder="（单位：秒）"
                           aria-label="Username" aria-describedby="basic-addon1">
                    <b><span style="font-size: 20px; margin-left: 10px; margin-right: 10px">~</span></b>
                    <input type="text" v-model="clickLikeRandomInterval_2" class="form-control" placeholder="（默认为空）"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                            @click="closeModal('taskClickLikeModal')">关闭
                    </button>
                    <button type="button" class="btn btn-primary" @click="createTask('6', 'taskClickLikeModal')">确认操作</button>
                </div>
            </div>
        </div>
    </div>

    <!--给直播间送礼物-->
    <div class="modal fade" id="taskFindGiftModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">添加送礼物任务</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            @click="closeModal('taskFindGiftModal')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">礼物名称：</span>
                    </div>
                    <input type="text" v-model="giftName" class="form-control" placeholder="请输入正确的礼物名称"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">礼物的个数：</span>
                    </div>
                    <input type="text" v-model="giftCount" class="form-control" placeholder="（单位：个，默认为 1 个）"
                           aria-label="Username" aria-describedby="basic-addon1">

                </div>

                <div v-if="1 < Number(this.giftCount) && Number(this.giftCount) < 11"
                     class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">送礼物的时间间隔：</span>
                    </div>
                    <input v-for="index in (Number(this.giftCount) - 1)" :key="index" type="text" value=""
                           name="taskGiftInterval" class="form-control" placeholder="" aria-label="Username"
                           aria-describedby="basic-addon1">

                </div>

                <div v-if="Number(this.giftCount) > 10" style="color: red; margin: auto">
                    <b><span>礼物超过10个，将按照默认的时间间隔进行赠送操作</span></b>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                            @click="closeModal('taskFindGiftModal')">关闭
                    </button>
                    <button type="button" class="btn btn-primary" @click="createTask('7', 'taskFindGiftModal')">确认操作</button>
                </div>
            </div>
        </div>
    </div>

    <!--#####################################################fg###############################################################-->

    <!--查找直播间模态框-->
    <div class="modal fade" id="roomModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            @click="closeModal('roomModal')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">直播间主播名称：</span>
                    </div>
                    <input type="text" v-model="roomName" class="form-control" placeholder="请输入直播间主播的名称"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>
                <div class="row-cols-auto">
                    <label style="margin-left: 20px">
                        <b>是否可以包含：</b><input type="checkbox" v-model="roomNameContain"
                                             style="width: 20px; height: 20px">
                    </label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                            @click="closeModal('roomModal')">关闭
                    </button>
                    <button type="button" class="btn btn-primary" @click="findRoom">确认操作</button>
                </div>
            </div>
        </div>
    </div>

    <!--给直播间评论-->
    <div class="modal fade" id="sendTextModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            @click="closeModal('sendTextModal')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">评论文本：</span>
                    </div>
                    <input type="text" v-model="sendText" class="form-control" placeholder="请输入你想发送的评论信息"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">评论次数：</span>
                    </div>
                    <input type="text" v-model="sendTextCount" class="form-control" placeholder="请输入你想发送评论的次数（默认为1次）"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">评论频率：</span>
                    </div>
                    <input type="text" v-model="sendTextInterval" class="form-control"
                           placeholder="请输入你想发送评论的频率（单位：秒，默认为 0.5秒/次）" aria-label="Username"
                           aria-describedby="basic-addon1">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                            @click="closeModal('sendTextModal')">关闭
                    </button>
                    <button type="button" class="btn btn-primary" @click="sendTextToRoom">确认操作</button>
                </div>
            </div>
        </div>
    </div>

    <!--给直播间点赞-->
    <div class="modal fade" id="clickLikeModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            @click="closeModal('clickLikeModal')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">点赞次数：</span>
                    </div>
                    <input type="text" v-model="clickLikeCount" class="form-control" placeholder="（默认为1次）"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">点赞的固定频率：</span>
                    </div>
                    <input type="text" v-model="clickLikeInterval" class="form-control" placeholder="（单位：秒，默认为 1秒/次）"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">点赞的随机频率范围：</span>
                    </div>
                    <input type="text" v-model="clickLikeRandomInterval_1" class="form-control" placeholder="（单位：秒）"
                           aria-label="Username" aria-describedby="basic-addon1">
                    <b><span style="font-size: 20px; margin-left: 10px; margin-right: 10px">~</span></b>
                    <input type="text" v-model="clickLikeRandomInterval_2" class="form-control" placeholder="（默认为空）"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                            @click="closeModal('clickLikeModal')">关闭
                    </button>
                    <button type="button" class="btn btn-primary" @click="clickLike">确认操作</button>
                </div>
            </div>
        </div>
    </div>

    <!--给直播间送礼物-->
    <div class="modal fade" id="findGiftModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            @click="closeModal('findGiftModal')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">礼物名称：</span>
                    </div>
                    <input type="text" v-model="giftName" class="form-control" placeholder="请输入正确的礼物名称"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">礼物的个数：</span>
                    </div>
                    <input type="text" v-model="giftCount" class="form-control" placeholder="（单位：个，默认为 1 个）"
                           aria-label="Username" aria-describedby="basic-addon1">

                </div>

                <div v-if="1 < Number(this.giftCount) && Number(this.giftCount) < 11"
                     class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">送礼物的时间间隔：</span>
                    </div>
                    <input v-for="index in (Number(this.giftCount) - 1)" :key="index" type="text" value=""
                           name="giftInterval" class="form-control" placeholder="" aria-label="Username"
                           aria-describedby="basic-addon1">

                </div>

                <div v-if="Number(this.giftCount) > 10" style="color: red; margin: auto">
                    <b><span>礼物超过10个，将按照默认的时间间隔进行赠送操作</span></b>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                            @click="closeModal('findGiftModal')">关闭
                    </button>
                    <button type="button" class="btn btn-primary" @click="findGift">确认操作</button>
                </div>
            </div>
        </div>
    </div>

    <!--给循环操作（5~7）-->
    <div class="modal fade" id="loopHandleModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            @click="closeModal('loopHandleModal')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <!--评论输入框-->
                <h4 style="margin: auto">评论信息配置：</h4>
                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">评论文本：</span>
                    </div>
                    <input type="text" v-model="sendText" class="form-control" placeholder="请输入你想发送的评论信息"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">评论次数：</span>
                    </div>
                    <input type="text" v-model="sendTextCount" class="form-control" placeholder="请输入你想发送评论的次数（默认为1次）"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">评论频率：</span>
                    </div>
                    <input type="text" v-model="sendTextInterval" class="form-control"
                           placeholder="请输入你想发送评论的频率（单位：秒，默认为 0.5秒/次）" aria-label="Username"
                           aria-describedby="basic-addon1">
                </div>

                <!--点赞输入框-->
                <h4 style="margin: auto">点赞信息配置:</h4>
                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">点赞次数：</span>
                    </div>
                    <input type="text" v-model="clickLikeCount" class="form-control" placeholder="（默认为1次）"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">点赞的固定频率：</span>
                    </div>
                    <input type="text" v-model="clickLikeInterval" class="form-control" placeholder="（单位：秒，默认为 1秒/次）"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">点赞的随机频率范围：</span>
                    </div>
                    <input type="text" v-model="clickLikeRandomInterval_1" class="form-control" placeholder="（单位：秒）"
                           aria-label="Username" aria-describedby="basic-addon1">
                    <b><span style="font-size: 20px; margin-left: 10px; margin-right: 10px">~</span></b>
                    <input type="text" v-model="clickLikeRandomInterval_2" class="form-control" placeholder="（默认为空）"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <!--送礼物输入框-->
                <h4 style="margin: auto">直播间送礼物配置：</h4>
                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">礼物名称：</span>
                    </div>
                    <input type="text" v-model="giftName" class="form-control" placeholder="请输入正确的礼物名称"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">礼物的个数：</span>
                    </div>
                    <input type="text" v-model="giftCount" class="form-control" placeholder="（单位：个，默认为 1 个）"
                           aria-label="Username" aria-describedby="basic-addon1">

                </div>

                <div v-if="1 < Number(this.giftCount) && Number(this.giftCount) < 11"
                     class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">送礼物的时间间隔：</span>
                    </div>
                    <input v-for="index in (Number(this.giftCount) - 1)" :key="index" type="text" value=""
                           name="loopGiftInterval" class="form-control" placeholder="" aria-label="Username"
                           aria-describedby="basic-addon1">

                </div>

                <div v-if="Number(this.giftCount) > 10" style="color: red; margin: auto">
                    <b><span>礼物超过10个，将按照默认的时间间隔进行赠送操作</span></b>
                </div>

                <h4 style="margin: auto">循环顺序：</h4>
                <div class="modal-body input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">循环编号：</span>
                    </div>
                    <input type="text" class="form-control" placeholder="" aria-label="Username"
                           aria-describedby="basic-addon1" name="loopNumber">
                    <b style="font-size: 20px"><span>~</span></b>
                    <input type="text" class="form-control" placeholder="" aria-label="Username"
                           aria-describedby="basic-addon1" name="loopNumber">
                    <b style="font-size: 20px"><span>~</span></b>
                    <input type="text" class="form-control" placeholder="" aria-label="Username"
                           aria-describedby="basic-addon1" name="loopNumber">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                            @click="closeModal('loopHandleModal')">关闭
                    </button>
                    <button type="button" class="btn btn-primary" @click="loopHandle">确认操作</button>
                </div>
            </div>
        </div>
    </div>

</div>

    <script src="style/vue.js"></script>
    <script src="style/axios.js"></script>
    <script>

        const http = axios.create({
            // timeout: 2500,                          // 请求超时，有大文件上传需要关闭这个配置
            baseURL: "http://127.0.0.1:5000",     // 设置api服务端的默认地址[如果基于服务端实现的跨域，这里可以填写api服务端的地址，如果基于nodejs客户端测试服务器实现的跨域，则这里不能填写api服务端地址]
            withCredentials: false,                    // 是否允许客户端ajax请求时携带cookie
        })

        const app = Vue.createApp({
            data() {
                return {
                    device_list: [],
                    roomName:"",
                    curDevice: "",
                    curDeviceList: [],
                    roomNameContain: true, // 查找直播间名称的时候，是否支持包含
                    sendText: "", //给直播间评论的文本
                    sendTextCount: 1, //发送评论的次数，默认为1次
                    sendTextInterval: 0.5, //发送评论的频率，默认为 0.5秒/次
                    clickLikeCount:"", // 点赞的次数，默认为 1 次
                    clickLikeInterval: "", // 点赞的固定频率，默认为 1秒/次， 如果有随机频率，则固定频率没有效果
                    clickLikeRandomInterval_1: "", // 点赞的随机频率范围， 默认为空
                    clickLikeRandomInterval_2: "", // 点赞的随机频率范围， 默认为空
                    giftName:"", // 送礼物的名称
                    giftCount: "",
                    curTaskId: "", // 当前正在添加任务的ID
                    sendTextTaskList: [{"text": "666", "count": "5", "interval": "1"}],  // 评论的任务列表
                    clickLikeTaskList: [{"count": "5", "interval": "5", "randomInterval": ["1", "5"]}], // 点赞任务列表
                    findGiftTaskList: [{"name": "小心心", "count":"1", "interval":["1", "4", "5"]}], // 送礼物任务列表
                    taskType: "",  // 下拉框选择的任务类型
                    taskNumber: "",  // 下拉框选择的对应任务的序号
                    curTaskList: [], // 当前任务类型对应的所有任务，可用第二个下拉框选择
                    allTaskQueue : {"all": []}, // 已加到任务队列的所有任务
                    loopCount: "", // 任务队列循环的次数
                    douyinMap: JSON.parse(localStorage.getItem("douyinMap")) || {},
                    deviceStatusMap:{},
                    curConfigDevice: "", // 下拉框选择的设备编号
                    curSelectDevice: "all", // tab 当前选择的设备号
                    curSelectLoopCountDevice: "", // 正在设置循环次数的设备号
                    allDeviceLoopCount: {}, // 存储所有设备的循环次数
                    allTaskIsLast: true, // 所有设备的共同任务是否最后执行，默认是最后执行
                    setLoopCountBtnText: "设置循环次数" // 设置循环次数按钮的文案
                }
            },
            computed: {
                deviceList() {
                  return this.device_list; // 返回 device_list 属性的值
                }
            },
            created() {
                this.get_all_device()
                const server = new WebSocket('ws://localhost:7788');
                // 处理连接建立
                server.onopen = () => {
                  console.log('WebSocket服务器已启动');
                };

                // 接收消息
                server.onmessage = (event) => {
                  const device_number = event.data;
                  console.log('收到来自客户端的消息:', device_number);
                  this.deviceStatusMap[device_number] = "连接断开"

                  // 在服务器上处理接收到的消息
                  const response = `服务器已收到消息: ${clientMessage}`;
                  server.send(response);
                };

                // 处理连接关闭
                server.onclose = () => {
                  console.log('WebSocket服务器已关闭');
                };
            },
            methods: {
                //
                setLoopCount() {
                    if (this.curSelectLoopCountDevice === "") {
                        alert("设备号必须选择，请选择后在设置循环次数");
                        return;
                    }
                    this.allDeviceLoopCount[this.curSelectLoopCountDevice] = this.loopCount || 1;
                    this.setLoopCountBtnText = "设置成功!!!!"
                    setTimeout(() => {
                        this.setLoopCountBtnText = "设置循环次数"
                    }, 2000)
                },
                //获取抖音名字
                getDouyinName(device, devices_list) {
                    const data = {
                        device: device,
                        deviceList: devices_list
                    }
                    http.post("/api/name", data).then(res => {
                        const resDeviceMap = res.data.deviceMap;
                        if (resDeviceMap) {
                            for (const device in resDeviceMap) {
                                this.douyinMap[device] = resDeviceMap[device]
                            }
                            localStorage.setItem("douyinMap", JSON.stringify(this.douyinMap))
                        }
                    })
                },
                get_all_device() {
                    http.get("/api/deviceList").then(res => {
                        this.device_list = res.data.device_list
                        this.deviceStatusMap = res.data.device_status
                    })
                },
                // 删除任务队列里的某个任务
                removeQueueTask(curSelectDevice, index) {
                    const curDeviceTaskList = this.allTaskQueue[curSelectDevice]
                    curDeviceTaskList.splice(index, 1)
                    this.allTaskQueue[curSelectDevice] = curDeviceTaskList
                },

                // 开始执行任务
                startRunTask() {
                    if (this.allTaskQueue.length < 1) {
                        alert("当前任务为空，请添加任务后再执行")
                        return
                    }
                    // const allDeviceGlobalTaskObj = {
                    //     "device": 'all',
                    //     "taskLoopCount": this.allDeviceLoopCount['all'] || 1,
                    //     "taskList": this.allTaskQueue['all']
                    // }
                    const allDeviceGlobalTask = this.allTaskQueue['all']
                    console.log("allDeviceGlobalTask -->", allDeviceGlobalTask)
                    const allDeviceGlobalLoopCount = this.allDeviceLoopCount['all'] || 1;
                    const finalTaskList = []
                    for (const device in this.allTaskQueue) {
                        if (device === 'all') {
                            continue
                        }
                        const curTaskLoopCount = this.allDeviceLoopCount[device] || 1;
                        const curDeviceAllTaskList = []
                        let num = 0;
                        while (num < curTaskLoopCount) {
                            for(const task of this.allTaskQueue[device]) {
                                console.log("task",task)
                                curDeviceAllTaskList.push(task)
                            }
                            num++
                        }
                        const curDeviceTaskObj = {
                            "device": device,
                            "taskLoopCount": 1,
                            "taskList": curDeviceAllTaskList
                        }
                        finalTaskList.push(curDeviceTaskObj)
                    }
                    for (const device_obj of finalTaskList) {
                        let num = 0
                        while (num < allDeviceGlobalLoopCount) {
                            for(const globalTask of allDeviceGlobalTask) {
                                if (this.allTaskIsLast) {
                                    device_obj["taskList"].push(globalTask)
                                } else {
                                    device_obj["taskList"].unshift(globalTask)
                                }
                            }
                            num++
                        }

                    }

                    console.log("final-->", finalTaskList)

                    // const taskQueueObj = {
                    //     "taskLoopCount": this.loopCount || 1,
                    //     "taksList": this.allTaskQueue,
                    //     "deviceList": this.device_list
                    // }

                    http.post("/api/runTask", finalTaskList).then(res => {
                        if (res.data.fatal) {
                            alert(`严重错误: ${res.data.fatal}`)
                            return
                        }
                    })
                },

                //停止执行任务
                stopRunTask(device, device_list) {
                    const data = {
                        device,
                        device_list
                    }
                    http.post("/api/stopRun", data).then(res => {
                        console.log(res.data.msg)
                    })
                },
                // 当前选择的任务编号
                selectTask() {
                    if (this.taskType === "5") {
                        this.curTaskList = this.sendTextTaskList
                    }
                    if (this.taskType === "6") {
                        this.curTaskList = this.clickLikeTaskList
                    }
                    if (this.taskType === "7") {
                        this.curTaskList = this.findGiftTaskList

                    }
                },
                // 获取当前选择的任务对象
                getTaskObj() {
                    // console.log(this.taskObj)
                    if (this.curConfigDevice === "") {
                        alert("必须选择一个设备或者所有设备，才能添加任务")
                        return;
                    }
                    if (this.taskType === "") {
                        alert("必须选择一个任务类型，才能添加任务")
                        return;
                    }
                    if (this.taskNumber === "") {
                        alert("必须选择一个任务序号才能添加任务")
                        return;
                    }
                    const curTaskObj = {
                        "taskType": this.taskType,
                        "taskNumber": this.taskNumber,
                    }
                    if (this.taskType === "5") {
                        curTaskObj.params = this.sendTextTaskList[this.taskNumber]
                    }
                    if (this.taskType === "6") {
                        curTaskObj.params = this.clickLikeTaskList[this.taskNumber]
                    }
                    if (this.taskType === "7") {
                        curTaskObj.params = this.findGiftTaskList[this.taskNumber]
                    }
                    let curDeviceTaskList = this.allTaskQueue[this.curConfigDevice]
                    if (!curDeviceTaskList) {
                        curDeviceTaskList = []
                    }
                    curDeviceTaskList.push(curTaskObj)
                    console.log("key-->", this.curConfigDevice)
                    this.allTaskQueue[this.curConfigDevice] = curDeviceTaskList
                    this.curSelectDevice = this.curConfigDevice
                    console.log("allTask-->", this.allTaskQueue)
                },

                //打开添加任务modal
                openAddTaskModal(taskId, modalId) {
                    this.curTaskId = taskId
                    curModal = document.querySelector(`#${modalId}`)
                    curModal.style.display = "block";
                    curModal.classList.add("show")
                },

                // 删除某个任务
                removeTask(taskId, index) {
                    if (taskId === "5") {
                        this.sendTextTaskList.splice(index, 1)
                    } else if(taskId === "6") {
                        this.clickLikeTaskList.splice(index, 1)
                    } else if (taskId === "7") {
                        this.findGiftTaskList.splice(index, 1)
                    }
                },
                // 创建任务
                createTask(taskId, modalId) {
                    const rowData = this.paramsHandle(taskId)
                    if (!rowData) {
                        console.log("数据不正确添加数据失败")
                        return
                    }
                    if (taskId === "5") {
                        this.sendTextTaskList.push(rowData)
                        console.log("sendTextTaskList-->", this.sendTextTaskList)
                    }

                    if (taskId === "6") {
                        this.clickLikeTaskList.push(rowData)
                        console.log("clickLikeTaskList-->", this.clickLikeTaskList)
                    }

                    if (taskId === "7") {
                        this.findGiftTaskList.push(rowData)
                        console.log("findGiftTaskList-->", this.findGiftTaskList)
                    }
                    this.closeModal(modalId)
                },

                // 任务参数处理
                paramsHandle(taskId) {
                    let data = {}
                    if (taskId === "5") {
                        if (!this.sendText) {
                        alert("评论信息是必填字段，请输入后再操作");
                        return;
                        }
                        if (this.sendTextCount && isNaN(Number(this.sendTextCount))) {
                            alert("输入错误，评论次数必须是数字")
                            return;
                        }
                        if (this.sendTextInterval && isNaN(Number(this.sendTextInterval))) {
                            alert("输入错误，评论频率必须是数字")
                            return;
                        }
                        data = {
                            text: this.sendText,
                            count: this.sendTextCount,
                            interval: this.sendTextInterval,
                        }
                    }

                    if (taskId === "6") {
                        if ((this.clickLikeRandomInterval_1 && !this.clickLikeRandomInterval_2) || (!this.clickLikeRandomInterval_1 && this.clickLikeRandomInterval_2)) {
                        alert("点赞的随机频率输入错误，不能只输入一个值")
                        return
                        }
                        if (
                            this.clickLikeCount && isNaN(Number(this.clickLikeCount))
                            || this.clickLikeInterval && isNaN(Number(this.clickLikeInterval))
                            || this.clickLikeRandomInterval_1 && isNaN(Number(this.clickLikeRandomInterval_1))
                            || this.clickLikeRandomInterval_2 && isNaN(Number(this.clickLikeRandomInterval_2))
                           )
                        {
                            alert("输入错误，点赞次数和点赞频率必须是数字")
                            return;
                        }
                        let randomIntervalRange = []
                        if (this.clickLikeRandomInterval_1 && this.clickLikeRandomInterval_2) {
                            randomIntervalRange = [this.clickLikeRandomInterval_1,this.clickLikeRandomInterval_2]
                        }
                        data = {
                            count: this.clickLikeCount,
                            interval: this.clickLikeInterval,
                            randomInterval: randomIntervalRange,
                        }
                    }

                    if (taskId === "7") {
                        if (!this.giftName) {
                        alert("礼物名称是必填项，请正确填写")
                        return;
                        }
                        if (this.giftCount && isNaN(Number(this.giftCount))) {
                            alert("礼物个数必须是数字")
                            return;
                        }
                        const giftInterval_list = []
                        if (this.giftCount > 1) {
                            const giftIntervals = document.querySelectorAll("[name='taskGiftInterval']")
                            for(const giftInterval of giftIntervals) {
                                const cur_interval = giftInterval.value
                                console.log(Number(cur_interval))
                                if (!cur_interval) {
                                    alert("时间间隔必须全部填写")
                                    return;
                                }
                                if (isNaN(Number(cur_interval))) {
                                    alert("时间间隔必须是数字，请填写正确")
                                    return;
                                }
                                giftInterval_list.push(cur_interval)
                            }
                        }
                        data = {
                            name: this.giftName,
                            count: this.giftCount || 1,
                            interval: giftInterval_list || null,
                        }
                    }

                    return data;
                },
                // 启动或关闭app
                handleApp(device, handle, deviceList) {
                    const data = {
                        device: device,
                        handle: handle,
                        deviceList: deviceList,
                    }
                    http.post("/api/handleApp", data).then(res => {
                        const code = res.data.code
                        if (code === 0) {
                            if (res.data.deviceMap) {
                                this.douyinMap = res.data.deviceMap
                                localStorage.setItem("douyinMap", JSON.stringify(this.douyinMap))
                            }
                        } else if (code === -1) {
                            console.log(res.data.msg)
                        }
                    })
                },

                //打开直播间modal
                openModal(device, curDeviceList=null, modalId) {
                    this.curDevice = device
                    this.curDeviceList = curDeviceList
                    curModal = document.querySelector(`#${modalId}`)
                    curModal.style.display = "block";
                    curModal.classList.add("show")
                },
                // 关闭直播间modal
                closeModal(modalId) {
                    curModal = document.querySelector(`#${modalId}`)
                    curModal.style.display = "none";
                    curModal.classList.remove("show")
                    this.curDevice = ""
                    this.roomName = ""
                },
                //查找直播间
                findRoom() {
                    if (!this.roomName) {
                        alert("直播间名称不能为空，请重新输入！！！！！")
                        return
                    }
                    const data = {
                            roomName: this.roomName,
                            device: this.curDevice || null,
                            deviceList: this.curDeviceList,
                            contain: this.roomNameContain
                        }
                    this.closeModal('roomModal')
                    console.log("findData-->", data)
                    http.post("/api/findRoom", data).then(res => {
                        if (res.data.code === -1) {
                            alert(res.data.msg)
                        } else {
                            console.log("成功")
                        }
                    })
                },

                // 给主播点关注
                clickCare(device, deviceList=null) {
                    const data = {
                        device,
                        deviceList
                    }
                    console.log("care-->",data)
                    http.post("/api/clickCare", data).then(res => {
                        if (res.data.code === -1) {
                            console.log(res.data.msg)
                        } else {
                            console.log(res.data.msg)
                        }
                    })
                },

                // 直播间评论
                sendTextToRoom() {
                    if (!this.sendText) {
                        alert("评论信息是必填字段，请输入后再操作");
                        return;
                    }
                    if (this.sendTextCount && isNaN(Number(this.sendTextCount))) {
                        alert("输入错误，评论次数必须是数字")
                        return;
                    }
                    if (this.sendTextInterval && isNaN(Number(this.sendTextInterval))) {
                        alert("输入错误，评论频率必须是数字")
                        return;
                    }
                    const data = {
                        device: this.curDevice,
                        deviceList: this.curDeviceList,
                        text: this.sendText,
                        count: this.sendTextCount,
                        interval: this.sendTextInterval,
                    }
                    this.closeModal('sendTextModal')
                    console.log("sendText-->", data)
                    http.post("api/sendText", data).then(res => {
                        console.log(res.data.msg)
                    })
                },

                // 给直播间点赞
                clickLike() {
                    if ((this.clickLikeRandomInterval_1 && !this.clickLikeRandomInterval_2) || (!this.clickLikeRandomInterval_1 && this.clickLikeRandomInterval_2)) {
                        alert("点赞的随机频率输入错误，不能只输入一个值")
                        return
                    }
                    if (
                        this.clickLikeCount && isNaN(Number(this.clickLikeCount))
                        || this.clickLikeInterval && isNaN(Number(this.clickLikeInterval))
                        || this.clickLikeRandomInterval_1 && isNaN(Number(this.clickLikeRandomInterval_1))
                        || this.clickLikeRandomInterval_2 && isNaN(Number(this.clickLikeRandomInterval_2))
                       )
                    {
                        alert("输入错误，点赞次数和点赞频率必须是数字")
                        return;
                    }
                    let randomIntervalRange = ""
                    if (this.clickLikeRandomInterval_1 && this.clickLikeRandomInterval_2) {
                        randomIntervalRange = `${this.clickLikeRandomInterval_1},${this.clickLikeRandomInterval_2}`
                    }
                    const data = {
                        device: this.curDevice,
                        deviceList: this.curDeviceList,
                        count: this.clickLikeCount,
                        interval: this.clickLikeInterval,
                        randomInterval: randomIntervalRange,
                    }
                    console.log("clickLike-->", data)
                    this.closeModal("clickLikeModal")
                    http.post("/api/clickLike", data).then(res => {
                        if (res.data.err) {
                            alert(res.data.err)
                        }
                    })
                },

                //给直播间送礼物
                findGift() {
                    if (!this.giftName) {
                        alert("礼物名称是必填项，请正确填写")
                        return;
                    }
                    if (this.giftCount && isNaN(Number(this.giftCount))) {
                        alert("礼物个数必须是数字")
                        return;
                    }
                    const giftInterval_list = []
                    if (this.giftCount > 1) {
                        const giftIntervals = document.querySelectorAll("[name='giftInterval']")
                        for(const giftInterval of giftIntervals) {
                            const cur_interval = giftInterval.value
                            console.log(Number(cur_interval))
                            if (!cur_interval) {
                                alert("时间间隔必须全部填写")
                                return;
                            }
                            if (isNaN(Number(cur_interval))) {
                                alert("时间间隔必须是数字，请填写正确")
                                return;
                            }
                            giftInterval_list.push(cur_interval)
                        }
                    }
                    const data = {
                        device: this.curDevice,
                        deviceList: this.curDeviceList,
                        giftName: this.giftName,
                        giftCount: this.giftCount || 1,
                        giftIntervalList: giftInterval_list || null,
                    }
                    this.closeModal("findGiftModal")
                    http.post("/api/findGift", data).then(res => {
                        if (res.data.err) {
                            console.log(res.data.err)
                        } else {
                            console.log(res.data.msg)
                        }
                    })
                },

                // 循环操作
                async loopHandle() {
                    // 评论信息配置的前提条件
                    if (!this.sendText) {
                        alert("评论信息是必填字段，请输入后再操作")
                        return
                    }
                    if (this.sendTextCount && isNaN(Number(this.sendTextCount))) {
                        alert("输入错误，评论次数必须是数字")
                        return;
                    }
                    if (this.sendTextInterval && isNaN(Number(this.sendTextInterval))) {
                        alert("输入错误，评论频率必须是数字")
                        return;
                    }
                    // 点赞信息配置的前提条件
                    if ((this.clickLikeRandomInterval_1 && !this.clickLikeRandomInterval_2) || (!this.clickLikeRandomInterval_1 && this.clickLikeRandomInterval_2)) {
                        alert("点赞的随机频率输入错误，不能只输入一个值")
                        return
                    }
                    if (
                        this.clickLikeCount && isNaN(Number(this.clickLikeCount))
                        || this.clickLikeInterval && isNaN(Number(this.clickLikeInterval))
                        || this.clickLikeRandomInterval_1 && isNaN(Number(this.clickLikeRandomInterval_1))
                        || this.clickLikeRandomInterval_2 && isNaN(Number(this.clickLikeRandomInterval_2))
                       )
                    {
                        alert("输入错误，点赞次数和点赞频率必须是数字")
                        return;
                    }
                    let randomIntervalRange = ""
                    if (this.clickLikeRandomInterval_1 && this.clickLikeRandomInterval_2) {
                        randomIntervalRange = `${this.clickLikeRandomInterval_1},${this.clickLikeRandomInterval_2}`
                    }

                    //送礼物信息配置的前提条件
                    if (!this.giftName) {
                        alert("礼物名称是必填项，请正确填写")
                        return;
                    }
                    if (this.giftCount && isNaN(Number(this.giftCount))) {
                        alert("礼物个数必须是数字")
                        return;
                    }
                    const giftInterval_list = []
                    if (this.giftCount > 1) {
                        const giftIntervals = document.querySelectorAll("[name='loopGiftInterval']")
                        for(const giftInterval of giftIntervals) {
                            const cur_interval = giftInterval.value
                            console.log(Number(cur_interval))
                            if (!cur_interval) {
                                alert("时间间隔必须全部填写")
                                return;
                            }
                            if (isNaN(Number(cur_interval))) {
                                alert("时间间隔必须是数字，请填写正确")
                                return;
                            }
                            giftInterval_list.push(cur_interval)
                        }
                    }
                    //循环顺序参数
                    let loop_number = new Set()
                    const numbers = document.querySelectorAll("[name='loopNumber']")
                    for (const numberEle of numbers) {
                        const curNumber = numberEle.value
                        if(["5", "6", "7"].includes(curNumber)) {
                            loop_number.add(curNumber)
                        }
                    }
                    loop_number = Array.from(loop_number)
                    if (loop_number.length !== 3) {
                        alert("循环顺序编号输入错误，必须是数字的 5 或 6 或 7, 且不能有重复数字")
                        return;
                    }

                    // 所有的请求参数
                    const data = {
                        device: this.curDevice,
                        deviceList: this.curDeviceList,
                        // 评论请求参数
                        text: this.sendText,
                        textCount: this.sendTextCount || 1,
                        textInterval: this.sendTextInterval || 0.5,
                        // 点赞请求参数
                        likeCount: this.clickLikeCount || 1,
                        likeInterval: this.clickLikeInterval || 1,
                        randomInterval: randomIntervalRange,
                        // 送礼物的请求参数
                        giftName: this.giftName,
                        giftCount: this.giftCount || 1,
                        giftIntervalList: giftInterval_list || null,
                        loopNumber: loop_number
                    }
                    console.log("loopHandle-->", data)
                    this.closeModal('loopHandleModal')

                    let res = await http.post("/api/loopHandle", data)
                    if (res.data.code === -1) {
                        console.log(`出现了错误: ${res.data.err}`)
                    } else {
                        console.log(res.data)
                    }
                }
            },
        });
        app.mount('#app');
    </script>

</body>
</html>